<!--
  Author: 善良的YWJ
  Created by shanliangdeYWJ on 2020/09/09
  File: 01.3React Fragments防止div破坏语义化html.html
  Description: "
  
   请输入文件描述内容
  
               " 
  Github: https://github.com/shanliangdeYWJ
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
  <meta name="keywords" content="">
  <meta name="description" content="">
  <title>01.4一系列对象映射到一个fragment</title>
  <style>
    /* css init */
    body,
    ul,
    dl,
    /* dt, */
    dd,
    p {
      margin: 0;
      padding: 0;
      list-style: none;
    }
  </style>
</head>

<body>

  <div id="root"></div>

  <!-- 加载 React。-->
  <!-- 注意: 部署时，将 "development.js" 替换为 "production.min.js"。-->
  <!--<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>-->
  <script src="../js/react@16.development.js" crossorigin></script>
  <script src="../js/react-dom@16.development.js" crossorigin></script>
  <script src="../js/babel@6.min.js"></script>
  <!-- <script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script> -->

  <!-- 加载我们的 React 组件。-->
  <script type="text/babel">
    const { Fragment } = React;

    function ListItem(props) {
      return (
        props.items.map(item => (
          <Fragment>
            <dt>{item.term}</dt>
            <dd>{item.description}</dd>
          </Fragment>
        ))
      )
    }

    function Clossary(props) {
      return (
        <dl>
          <ListItem item={props} key={item.id} />
        </dl>
      )
    }

    const items = [
      { id: 1, term: 1, description: '第一学期，浙江医药高等专科学校' },
      { id: 2, term: 2, description: '第二学期，浙江医药高等专科学校' },
      { id: 3, term: 3, description: '第三学期，浙江医药高等专科学校' },
      { id: 4, term: 4, description: '第四学期，宁波财经学院' },
      { id: 5, term: 5, description: '第五学期，宁波财经学院' },
    ]
    ReactDOM.render(<Clossary items={items} />, document.getElementById('root'));

  </script>
</body>

</html>